<template>
  <div>
    <!-- @input value -->
    <!--
      vue3中的v-model结合了vue2中的v-model和sync修饰符
      1. 发射的事件名称和sync修饰符类似，必须是update:开头
      2. 接收父组件数据的属性默认不叫value 叫modelValue
    -->
    <input type="text" :value="modelValue" @input="handleInput" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 默认的属性只能是modelValue，当然也可以自定义，注意自定义之后，父组件中v-model必须改成v-model:自定义的名字="xxx"的写法
defineProps<{
  modelValue: string
}>()

// 发射的事件只能是update:modelValue，当然如果modelValue自定义了，那么事件名称也要跟着自定义
const emits = defineEmits<{
  (e: 'update:modelValue', v: string): void
}>()

const handleInput = (e: Event) => {
  // 发射一个update:xxx的事件名称 以及传递输入框的值
  emits('update:modelValue', (e.target as HTMLInputElement).value)
}
</script>

<style scoped></style>
